<div class="welcome">
    <div class="main">
        <div class="welcome-logo"></div>
        <div class="welcome-heading">Welcome</div>
        <div class="intro">
            
        </div>
        
        <div class="presets">
            <h3>Choose a Preset</h3>
            <div class="preset_container">
                <div class="preset active" id="default">
                    <label>Full IDE</label>
                </div>
                <div class="preset" id="minimal">
                    <label>Minimal Editor</label>
                </div>
                <div class="preset" id="sublime">
                    <label>Sublime Mode</label>
                </div>
            </div>
        </div>
        
        <div class="configure">
            <h3>Configure Cloud9</h3>
            <div class="form"></div>
            <div class="more">more settings...</div>
        </div>
        
        <div class="next">
            <h3>Next Steps</h3>
            <ul>
                <li class="openterminal">Open a Terminal</li>
                <li class="openconsole">Open the Console</li>
                <li class="newfile">Create a new file</li>
            </ul>
        </div>
        
        <div class="switched">
            <h2>The Cloud9 Minimal Editor Layout</h2>
            <p>While in this layout the buttons for several handy panels are 
            hidden from view by default. You can gain access to these panels using key bindings.
            The list below are the most commonly used key bindings. For an 
            exhaustive list visit the key bindings editor in the preference panel. 
            You can also use the menus in the toolbar to find commands by walking 
            throught the sub menus.</p>
            
            <table>
                <tr>
                    <th>Key</th>
                    <th>Command</th>
                </tr>
                <tr>
                    <td>Command-U</td>
                    <td>Show and Hide the File Tree</td>
                </tr>
                <tr>
                    <td>Command-E</td>
                    <td>Show and Hide the Navigate Panel</td>
                </tr>
                <tr>
                    <td>Command-Shift-E</td>
                    <td>Show and Hide the Outline Panel</td>
                </tr>
                <tr>
                    <td>Command-,</td>
                    <td>Show and Hide the Preference Panel</td>
                </tr>
                <tr>
                    <td>Command-F</td>
                    <td>Show the Find and Replace Panel</td>
                </tr>
                <tr>
                    <td>Command-Shift-F</td>
                    <td>Show the Find in Files Panel</td>
                </tr>
            </table>
            
            <button onclick="this.parentNode.style.display='none'">Ok, Got it!</button>
        </div>
    </div>
    
    <div class="sidepanel">
        <!--h3>Walkthroughs</h3>
        <div class="video">
            <iframe width="250" height="141" src="https://www.youtube.com/embed/bUfrKO0YueM?html5=1" frameborder="0" allowfullscreen></iframe>
            <label>Cloud9 - The introduction</label>
        </div>
        <div class="more"><a href="https://www.youtube.com/user/c9ide/videos?flow=grid&amp;view=1" target="_blank">more...</a></div-->
        
        <h3>The Cloud9 Blog</h3>
        <div class="article">
            <h4><a href="https://c9.io/blog/edit-from-the-cloud9-terminal-like-a-boss-6-2-2015/" target="_blank">Edit from the Cloud9 Terminal like a Boss!</a></h4>
            <p>Since the dark ages when the green on black screens were the only interface to a machine, the terminal has been a coder’s best friend.</p>
            <p>This has been especially true with the advent of command line driven ecosystems like the Ruby and the Node.js communities.</p> 
        </div>
        <div class="more"><a href="https://blog.c9.io" target="_blank">more...</a></div>
        
        <h3>Docs</h3>
        <div class="article">
            <h4><a href="https://docs.c9.io/v1.0/docs/setup-a-database" target="_blank">Set up a Database</a></h4>
            <p>Like to run a Database with your application? You can use any Database you like! We have guides for MySQL, MongoDB and more on our documentation site.</p>
        </div>
        <div class="article">
            <h4><a href="https://docs.c9.io/v1.0/docs/faq-general" target="_blank">General FAQ</a></h4>
            <p>Have a question about Cloud9? It's probably covered in our <a href="https://docs.c9.io/v1.0/docs/faq-general" target="_blank">FAQ</a>. If it's not send us a message through our <a href="https://c9.io/support" target="_blank">support page</a> and we'll get back to you as soon as possible!</p>
        </div>
        <div class="more"><a href="https://docs.c9.io/v1.0/docs" target="_blank">more...</a></div>
        
        <br /><br />
    </div>
</html>
